﻿

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>千净</title>
    <style>
        .container {
            background-image: url("../../Statics/Images/shop/main/aunt.jpg");
            background-size: cover;
            display: block;
        }

        body {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <input type="tel" v-model="phone" id="phone" placeholder="输入手机号" style="height: 40px; font-size: 16px; border: 1px solid white; border-radius: 5px; margin-left: 13%; width: 74%; margin-top: 80%;" />
            
            <table cellpadding="0px" cellspacing="0px" style="height:40px; font-size:16px; border:0px solid white; border-radius:5px; margin-left:13%; width:78%; background-color:white; margin-top:3%;">
                <tr>
                    <td valign="middle" align="left" style="height: 40px; line-height: 40px; border:0px;">
                        <input id="txtCode" type="tel" placeholder="输入验证码" style="margin-left:2%; width:95%; height:40px; line-height:40px; background-color:transparent; border:0px solid black;" />
                    </td>
                    <td style="width:45%; border:0px; ">
                        <a v-on:tap="GetCode" id="aBtn" class="bg-blue font-white btn font-center" style="width:90%; height:35px; line-height:35px; display:block;">获取验证码</a>
                        <a id="aClock" style="display:none; width:90%; height:35px; line-height:35px; display:none; background-color:#c0c0c0; color:White; text-align:center;"></a>
                    </td>
                </tr>
            </table>
            
            <a class="bg-blue font-white btn font-center" v-on:tap="submit" style="width:60%; display: block; margin-left: 20%; margin-top: 20px; border-radius: 5px; padding: 10px 0px; ">绑定</a>
        </div>

        <div>
            <form id="form" method="post">
                <input type="hidden" v-bind:value="data" name="data" />
            </form>
        </div>
    </div>
    <input type="hidden" id="hfCode" value="0" />
</body>


</html>
@section Styles{
    @Styles.Render("~/cssbundles/consumer/subscribe")
    <style>
        input::-moz-placeholder {
            text-align: center;
        }

        input::-webkit-input-placeholder {
            text-align: center;
        }

        input:-ms-input-placeholder {
            text-align: center;
        }
    </style>
}
@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>
        var stim;
        var second = 60;
        function CheckTime() {

            $("#aClock").text(second.toString() + "秒");

            second--;

            if (second == 0) {
               
                clearInterval(stim); second = 60;
                $("#aBtn").css("display", "block");
                $("#aClock").css("display", "none");
            }
            
        }


        var model = new Vue({
            el: '#app',
            data: {
                openid: '@ViewBag.Openid',
                phone: '',

            },
            computed: {
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                submit: function () {

                    if($("#phone").val()=="")
                    {
                        alert("请输入手机号码！");
                        return;
                    }

                    if($("#txtCode").val()=="")
                    {
                        alert("请输入验证码！");
                        return;
                    }

                    if($("#txtCode").val() != $("#hfCode").val())
                    {
                        alert("验证码输入错误");
                        return;
                    }

                    $("#form").submit();
                },
                GetCode: function(){
                    var ssabc = $("#phone").val();
                    var data1 = '{"ccphone":"' + ssabc + '"}';

                    $.ajax({
                        type: "POST",
                        url: "GetPhoneCode",
                        contentType: "application/json",
                        data: data1,
                        success: function (responseData) {
                            var ss = responseData;
                            $("#hfCode").val(ss);
                            $("#aBtn").css("display", "none");
                            $("#aClock").css("display", "block");
                         
                            stim = setInterval(CheckTime, 1000);
                            
                        }
                    });

                }
            }
        })
        $(function () {

            var height = $(document).height();
            var width = $(document).width();
            $(".container").width(width + "px");
            $(".container").height(height + "px");
            if(@ViewBag.n==2){
                alert("绑定成功");

            }
            if(@ViewBag.n==1){
                alert("绑定失败");

            }
        })
    </script>

}